<template>
<div class="pie-box" :style="{width:width,height:height}" @mouseenter="stopData()" @mouseleave="startData()">
<!--    <div class="row-data">-->
<!--        <span>{{rollDataValue}}</span>-->
<!--       <div>{{rollDataText}}</div>-->
<!--    </div>-->
    <div v-show="flag"  class="echarts" ref="echarts" :style="{height:height}"></div>
    <div v-show="!flag"  class="no-data-echarts">
        {{message}}
    </div>
</div>
</template>
<script>
import mixincomon from '@/mixins/mixincomon';
import tool from '@/libs/tool'
export default {
    name:"chart",
    mixins: [mixincomon],
    data(){
        return {
          timeDataFlag:null,//数据轮训定时
          lightIndex:0,//默认第一个模块高亮
          flag:true,
          lengthTree:1,
          rollDataValue:0,
            options: {
                color:['#0393FF','#597EF7',"#D9F7BE"],
                legend: {
                    show:false,
                    data: [],
                    textStyle:{
                        color:'#fff'
                    },
                    bottom:10,
                    type:"scroll",
                    icon:"rect",
                    pageIconInactiveColor:'#aaa',
                    pageIconColor:"#008aff",
                    pageTextStyle:{
                        color:"#fff",
                    }
                },
                tooltip: {
                    trigger: 'item',
                    backgroundColor:'rgba(54, 165, 254, 0.6)',
                    formatter:'{b}: {c}'
                },
                series: [
                  {
                    type:'treemap',
                    name:'隐患设备总数',
                    data:[],
                    width:'100%',
                    height:'80%',
                    colorAlpha:[0.3, 1],
                  }
                ]
            },

        }
    },
    props:{
        option:{
            type:Object,
            default:()=>{
                return {}
            }
        },
        rollData:{
          type:Boolean,
          default:false,
        },
        data:{
            type:Array,
            default:()=>{
                return []
            }
        },
    },
    mounted(){
        this.$nextTick(()=>{
            this.init();
        })
    },
    watch: {

    },
    methods:{
      getColor(value){

      },
      setTreeValue(arr=[],children='children',label='label'){
        let getArray=(_arr)=>{
          _arr.map(item=>{
            item[label]=this.getColor(item.value)
            if(item[children] instanceof Array){
              getArray(item[children])
            }
          })
          return  _arr;
        }

        return getArray(arr);
      },
        init(){
            if(this.data.length>0){
                let _option=_.merge(this.options,this.option);
                console.log(_option,'_option',this.options)

                this.flag=true;
                this.$nextTick(()=>{
                  _option.series[0].data=_.get(this.data,'0.data')||[];
                  this.lengthTree=tool.treeToArray(this.data[0].data).length;
                  this.optionCureen=_.cloneDeep(_option);
                  this.initChart('echarts',this.optionCureen);
                  this.startData();
                 })

            }else{
                this.clearChart();
                this.flag=false;
            }
        },

      stopData(){
        this.timeDataFlag&&clearTimeout(this.timeDataFlag);
      },
      startData(){
        if(this.rollData&&(_.get(this.optionCureen.series,'0.data')||[]).length){
          this.lightIndex=1;
          this.setTimeData();
        }
      },
      setTimeData(){//动态选中模块
          this.stopData();
          this.timeDataFlag=setInterval(()=>{
            this.lightIndex%this.lengthTree==0&&this.lightIndex++
            this.myChart.dispatchAction({
              type: 'showTip',         //提示框
              seriesIndex: 0,
              dataIndex: this.lightIndex%this.lengthTree
            });
            this.lightIndex++;
          },2000)
      }
    }
}
</script>
<style lang="less" scoped>
.pie-box{
  position: relative;
  .row-data{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,50%);
  }
}
.no-data-echarts{
    height: 100%;
    position: relative;
    span{
        left: 0;
        text-align: center;
        position: absolute;
        top: 45%;
    }
}
</style>
